<template>
  <div class="symbolRecommend" v-if="recommendList && recommendList.length > 0">
    <div class="mainView">
      <div class="flex recommendCont">
        <div class="itemList" v-for="item in recommendList" :key="item.id" @click="handleToTrade(item.symbol)">
          <div class="firstList flexb">
            <div class="flex relative">
              <div class="newCoinImg"
                :class="{ 'newCoinImgForTron' : $appName === 'tronNewdex'}">
                <img alt=""
                v-if="$appName === 'eosNewdex'
                && item.valuationCoinContract === 'issue.newdex'
                && item.contract !== 'issue.newdex'"
                :src="`https://ndi.340wan.com/${item.baseChain}/${item.contract}-${(item.symbolTrad || '').toLowerCase()}.png`">
                <img alt=""
                v-else-if="$appName === 'eosNewdex'
                && item.valuationCoinContract === 'issue.newdex'"
                :src="`https://ndi.340wan.com/${item.baseChain}/${item.valuationCoinContract}-${(parseSymbol(item.symbol, item.contract)[1].toUpperCase() || '').toLowerCase()}.png`">
                <img alt=""
                v-else-if="$appName === 'eosNewdex'
                && (item.valuationCoinContract === 'bitpietokens' || item.valuationCoinContract === 'enu.token')
                && parseSymbol(item.symbol, item.valuationCoinContract)[1].toUpperCase() !== 'EOS'"
                :src="`https://ndi.340wan.com/${item.baseChain}/${item.valuationCoinContract}-${(parseSymbol(item.symbol, item.valuationCoinContract)[1].toUpperCase() || '').toLowerCase()}.png`">
                <img alt=""
                v-else-if="$appName === 'eosNewdex' &&
                item.valuationCoinContract &&
                item.valuationCoinContract !== 'eosio.token' &&
                item.valuationCoinContract !== 'tethertether' &&
                item.valuationCoinContract !== 'issue.newdex'"
                :src="`https://ndi.340wan.com/${item.baseChain}/${item.valuationCoinContract}-${(parseSymbol(item.symbol, item.valuationCoinContract)[2].toUpperCase() || '').toLowerCase()}.png`">
                <img alt=""
                v-else-if="$appName === 'tronNewdex'"
                :src="`https://ndi.340wan.com/tron/${(item.symbolTrad).toLowerCase()}.png`">
                <img alt=""
                v-else
                :src="`https://ndi.340wan.com/${item.baseChain}/${item.contract}-${(item.symbolTrad || '').toLowerCase()}.png`">
              </div>
              <span style="margin-left: 30px;">{{ item.symbolFormat }}</span>
            </div>
          </div>
          <div class="flexb">
            <div class="num numClass" v-if="item.change === 0">
              <span>{{ handleToFixed(item.price, item.precision.price) }}</span>
              <span>{{ item.symbolArea }}</span>
            </div>
            <div class="num numClass" v-else :class="item.change < 0 ? 'color-red':'color-green'">
              <span>{{ handleToFixed(item.price, item.precision.price) }}</span>
              <span>{{ item.symbolArea }}</span>
            </div>
            <div class="percentClass">
              <span class="percent percentRedColor" v-if="item.change < 0">{{ handleToFixed(Number(accMul(item.change, 100)), 2)}}%</span>
              <span class="percent percentGreenColor" v-else-if="item.change > 0">+{{ handleToFixed(Number(accMul(item.change, 100)), 2) }}%</span>
              <span class="percent" v-else>0.00%</span>
            </div>
          </div>
          <div class="flexb mt5">
            <span style="color: #999;">
              ≈
              {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
              <span v-if="$store.state.app.pricesCurrentcy[item.symbolArea] * item.price < 0.1 && item.precision.price">
                {{ handlePriceNumber(item.symbolArea, item.price, item.precision.price) }}
              </span>
              <span v-else>
                {{Number(toNonExponential($store.state.app.pricesCurrentcy[item.symbolArea] * item.price)).toFixed(2)}}
              </span>
            </span>
          </div>
          <div class="ad" v-if="item.isAd">{{ $t('index.ad') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toFixed, accMul, toNonExponential, parseSymbol } from '@/utils/validate';

export default {
  name: 'symbolRecommend', // 推荐交易对
  data() {
    return {
      symbolRecommendList: [], // 推荐交易对初始值
      codeList: [], // 交易对列表
      recommendList: [], // 推荐交易对
      clearTime: null,
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.codeList.timer': function change() {
      this.handleRecommend()
    },
  },
  computed: {},
  created() {},
  mounted() {
  },
  beforeDestroy() {
    if (this.clearTime) {
      clearTimeout(this.clearTime);
    }
  },
  methods: {
    // 获取推荐交易对
    handleRecommend() {
      this.$http.get('/symbol/getSymbolRecommend').then((res) => {
        if (this.clearTime) {
          clearTimeout(this.clearTime);
        }
        this.clearTime = setTimeout(() => {
          this.handleRecommend();
        }, 180000);
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.symbolRecommendList = res.symbolRecommendList;
        this.handleRecommendList();
        // this.$store.dispatch('setSymbolRecommendList', res.symbolRecommendList); // 推荐交易对
      });
    },
    handleRecommendList() {
      this.recommendList = []
      this.codeList = this.$store.state.app.codeList.list || [];
      this.symbolRecommendList.forEach((v) => {
        this.codeList.forEach((i) => {
          if (v.symbolId === i.id) {
            this.recommendList.push(Object.assign(v, i))
          }
        })
      });
    },
    // 数字截取 - 保留小数
    accMul(num, p) {
      return accMul(num, p);
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
    handleToTrade(params) {
      this.$router.push({
        path: `/trade/${params}`
      })
    },
    handlePriceNumber(symbolArea, price, precision) {
      try {
        const a = this.$store.state.app.pricesCurrentcy[symbolArea];
        const b = toNonExponential(a * price);
        if (this.$store.state.app.language === 'zh-CN') {
          const p = precision >= 4 ? precision - 2 : precision;
          const c = Number(toFixed(b, p)).toFixed(p);
          const d = Number(c) ? Number(b).toFixed(p) : toNonExponential(Number(Number(b).toFixed(precision)))
          // return Number(b.toFixed(p)) ? b.toFixed(p) : b.toFixed(precision)
          return d;
        }
        const p = precision >= 4 ? precision - 1 : precision;
        const c = Number(toFixed(b, p)).toFixed(p);
        const d = Number(c) ? Number(b).toFixed(p) : toNonExponential(Number(Number(b).toFixed(precision)))
        return d;
        // return Number(b.toFixed(p)) ? b.toFixed(p) : b.toFixed(precision)
      } catch (error) {
        console.log(error); // eslint-disable-line
        return '0.00';
      }
    },
    parseSymbol(a, b) {
      return parseSymbol(a, b)
    }
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.greenColor {
  color: $-btn-green !important;
}

.redColor {
  color: $-btn-red !important;
}

.percentGreenColor {
  color: $-btn-green !important;
  // border-color: $-btn-green !important;
}

.percentRedColor {
  color: $-btn-red !important;
  // border-color: $-btn-red !important;
}

.symbolRecommend {
  margin-top: 20px;

  .mainView {
    width: $-min-width;
    margin: auto;
  }

  .recommendCont {
    height: 110px;
    overflow: hidden;
  }

  .itemList {
    position: relative;
    cursor: pointer;
    margin-right: 0.5%;
    width: 16.4%;
    padding: 20px 8px 20px 10px;
    background: #fff;

    &:last-child {
      margin-right: 0;
    }

    .percentClass {
      vertical-align: middle;
      display: inline-block;
      margin-top: 2px;
    }

    .numClass {
      span {
        display: inline-block;
      }

      span:nth-child(2) {
        font-size: 14px;
        text-indent:-4px;
      }
    }

    .ad {
      position: absolute;
      right: 0;
      top: 0;
      background: #edf4f9;
      color: #278eda;
      padding: 2px 13px;
      border-radius: 0 0 0 6px;
    }

    .firstList {
      margin-bottom: 5px;

      img {
        width: 25px;
        height: 25px;
      }

      .percent {
        display: inline-block;
        padding: 0 2px;
        // border: 1px solid #333;
        color: #333;
        border-radius: 5px;
      }

      .newCoinImg {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 25px;
        height: 25px;
        margin-top: -14px;
        background-color: #fff;
        background-image: url(/static/img/eos1.png);
        background-size: cover;
        border-radius: 50%;
      }
      .newCoinImgForTron {
        background-color: #fff;
        background-image: url('../assets/img/tron-default.png');
        background-size: cover;
      }
    }

    .num {
      font-size: 18px;
    }
  }
}

.theme-1B1D27 {
  .symbolRecommend {
    .itemList {
      background: #152247;

      .percent {
        color: $-menu-hover;
        border-color: $-menu-hover;
      }
    }
  }
}
</style>
